<template>
  <div style="width: 100%">
    <a-button slot="title" @click="$router.back()" type="link" icon="arrow-left" title="返回上一级">返回上一级</a-button>
    <div class="all-main">
      <div class="userVo-info">
        <a-avatar @click="seeUserInfo(resInfo.userVo ? resInfo.userVo.userId:undefined)" class="avator cursor" title="查看主页" :src="resInfo.userVo ? resInfo.userVo.avatar : ''"/>
        <span @click="seeUserInfo(resInfo.userVo ? resInfo.userVo.userId:undefined)" class="uname cursor">{{resInfo.userVo ? resInfo.userVo.userName : ''}}</span>
        <span>
          <a-tag class="cursor" v-for="tag in resInfo.userVo ? resInfo.userVo.rankList : []" :key="tag.rankName" :color="tag.rankColor">
            {{tag.rankName}}
          </a-tag>
        </span>
      </div>
      <div class="main-info">
        <div class="main-title" title="标题">资源标题:{{resInfo.resTitle}}</div>
        <div class="main-content">
          资源描述:{{resInfo.resDesc}}
        </div>
        <div class="main-content" v-if="resInfo.type">
          资源分类: <a-tag color="blue">{{resInfo.type.resourceType}}</a-tag>
        </div>
        <div class="main-content">
          发布时间:{{$moment(resInfo.resPushTime).format('yyyy-MM-DD HH:mm:ss')}}
        </div>
        <div class="main-content" v-if="resInfo.resUrl">
          资源URL:{{resInfo.resUrl}}
        </div>
        <div class="main-content">
          资源获取方式:{{resInfo.resUrlDesc}}
        </div>
        <div class="main-content">
          资源标签:
          <a-space>
            <a-tag v-for="(tag,index) in resInfo.resTags || []" :key="index">
              {{tag}}
            </a-tag>
          </a-space>
        </div>
        <div>
          <h2 style="margin-bottom: 5px">资源包</h2>
          <div v-if="resInfo.resImg" style="margin-bottom: 10px">
            <img style="margin-right: 10px" v-for="(img,index) in resInfo.resImg || []" :key="index" :src="img" width="300" height="200"/>
          </div>
          <div v-if="resInfo.resVideoUrl" style="margin-bottom: 10px">
            <video width="500" controls muted :src="resInfo.resVideoUrl"/>
          </div>
          <div v-if="resInfo.docVoList" class="doc">
            <div>资源文档:点击下载</div>
            <a class="down-item" :href="item.resDocUrl" v-for="(item,index) in resInfo.docVoList || []" :key="index" title="点击下载">
              {{item.title}}
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import encry from '@/utils/encryUtil'
import {getResDetail} from "@/api/resourse";
export default {
  name: "resDetail",
  created() {
    this.resId = encry.decrypt(this.$route.params.resId)
  },
  data(){
    return {
      resInfo:{},
      resId:undefined,
    }
  },
  mounted() {
    // 获取博客详情
    this.loadResInfo();
  },
  methods:{
    // 加载博客详情
    async loadResInfo(){
      const {code,data,msg} =  await getResDetail(this.resId);
      if (code === 200){
        this.resInfo = data;
      } else {
        this.$message.error(msg);
      }
    },
    // 查看用户详情
    seeUserInfo(userId){
      this.$router.push({
        name:'userinfo',
        params:{
          userId:this.$encry(userId)
        }
      })
    },
  }
}
</script>

<style lang="less" scoped>
.all-main{
  width: 100%;
  padding: 10px;
  .userVo-info{
    margin-bottom: 10px;
    .avator{
      margin-right: 10px;
    }
    .uname{
      font-size: 14px;
      margin-right: 10px;
      font-weight: 600;
    }
  }
  .main-info{
    padding-left: 40px;
    .main-title{
      font-size: 14px;
      font-weight: 600;
      line-height: 30px;
    }
    .main-content{
      font-size: 14px;
      line-height: 30px;
      padding-right: 40px;
    }
  }
}
.doc{
  line-height: 30px;
  font-size: 14px;
  .down-item{
    display: block;
  }
}

</style>
